<template>
	<div class="user_index_main">
		<div class="shopcart_header">
			<img src="../assets/images1/rightbut.png" alt="" class="shopcart_header-img" @click="back()" />
			<p>个人中心</p>
			<img src="../assets/images1/navgation.png" v-on:click="menuShow = !menuShow" class="shopcart_header-img1" />
		</div>
		<ul v-if="menuShow" id="ul">
			<li class="icon-contaner">
				<!--<a class="icon"><mu-icon value="home"/></a>-->首页
			</li>
			<li>我的</li>
			<li>搜索</li>
			<li>消息</li>
		</ul>
		<div class="user_card_box" id="userCardBox">

			<div class="user_info_box">
				<div class="user_img_box">
					<img src="../assets/images/gou_17.png" alt="会员头像" class="user_img">
				</div>
				<router-link tag="div" id="iocn" to="/settings">
					<img src="../static/set.png" alt="" />
				</router-link>
				<div class="account_box">
					<div class="account"></div>
					<div class="card_type_box">
						<span class="special_right"></span>
					</div>
				</div>
			</div>

		</div>
		<div class="shopcart_nav">
			<ul class="shopcollect">
				<li>
					<p class="p">29</p>
					<p>我的收藏</p>
				</li>
				<li class="p">
					<p>32</p>
					<p>购物车</p>

				</li>
				<li>
					<img src="../assets/images1/myshopimg.png" alt="" />
					<p>我的店铺</p>
				</li>
			</ul>
		</div>
		<div class="shopcart_box">
			<div class="my_order">
				<a></a>
				<span class="title_text fl">我的订单</span>
			</div>
			<router-link to="/help" class="check_all_order">
				<span class="check_all_order_text">全部订单</span>
				<div class="shopcart_img">
					<img src="../assets/images1/return.png" alt="" />
				</div>

			</router-link>

		</div>
		<p class="hr"></p>
		<div id="cope_main">
			<ul>
				<li class="cope_li"><img src="../assets/images1/book.png" alt="">
					<p>待付款</p>
				</li>
				<router-link to="/indent" tag="li" class="cope_li"><img src="../assets/images1/car.png" alt="">
					<p>待发货</p>
				</router-link>
				<li class="cope_li"><img src="../assets/images1/newspic.png" alt="">
					<p>待收货</p>
				</li>
				<li class="cope_li"><img src="../assets/images1/timecar.png" alt="">
					<p>待评论</p>
				</li>
				<li class="cope_li"><img src="../assets/images1/newspic.png" class="cope_li_img" alt="">
					<p>退款</p>
				</li>
			</ul>
		</div>
		<div class="cope_section">
			<div class="cope_section_module">
				<img src="../assets/images/gou_18.png" alt="" />
				<p>邀请好友</p>
			</div>
			<div class="cope_section_module">
				<img src="../assets/images/gou_18.png" alt="" />
				<p>邀请好友</p>
			</div>
			<div class="cope_section_module">
				<img src="../assets/images/gou_18.png" alt="" />
				<p>邀请好友</p>
			</div>

		</div>

		<my-footer></my-footer>
	</div>

</template>

<script>
	//  import numTip from './components/num_tip.vue';
	//  import helper from '../../config/helper.js'

	export default {
		data() {
			return {
				data: [],
				menuShow: false
			}
		},

		created() {
			//      	var url="http://develop.jhjvip.cn:8080/mall/mobile/yh/detail?id=1"
			//      	this.$http.get(url).then(res=>{
			//      		console.log(res.data.data)
			//      		this.data=res.data.data
			//      	})
			//			console.log(1)
		},
		methods: {
			back() {
				this.$router.push({
					path: "/settings",
				})
			}

		}
	}
</script>

<style scoped>
	.mu-icon {
		margin-top: 0.2rem;
	}
	
	#iocn {
		position: fixed;
		right: 0.5rem;
		top: 1.5rem;
	}
	
	#ul {
		width: 25%;
		height: 3.6rem;
		background: transparent;
		margin-top: 3.5rem;
		float: right;
		position: fixed;
		text-align: center;
		right: 0;
		top: -2.3rem;
	}
	
	#ul li {
		width: 100%;
		height: 0.88rem;
		line-height: 0.88rem;
		background: #111111;
		color: white;
	}
	
	#ul>li:nth-child(2) {
		margin-top: 0.05rem;
	}
	
	#ul>li:nth-child(3) {
		margin-top: 0.05rem;
	}
	
	#ul>li:nth-child(4) {
		margin-top: 0.05rem;
	}
	
	.user_index_main {
		background: #F2F2F2;
	}
	
	.shopcollect {
		font-size: 0;
	}
	
	.shopcollect>li {
		display: inline-block;
		width: 33%;
	}
	
	#cope_main>ul {
		font-size: 0;
		width: 100%;
	}
	
	.cope_li {
		width: 20%;
		display: inline-block;
	}
	
	.shopcart_header {
		width: 100%;
		height: 1.2rem;
		border-bottom: 1px solid gainsboro;
		display: flex;
		align-items: center;
		background: white;
		justify-content: space-between;
	}
	
	.shopcart_header p {
		/*margin-left: 40%;*/
		font-size: 0.4rem;
		font-weight: bold;
		text-align: center;
	}
	
	.shopcart_header>img:first-child {
		width: 5%;
		margin-left: 0.24rem;
	}
	
	.shopcart_header>img:last-child {
		width: 8%;
		margin-right: 0.27rem;
	}
	
	.p {
		font-size: 0.4rem;
	}
	
	.shopcart_nav {
		width: 100%;
		background: white;
		margin-top: -0.3rem;
		height: 1.59rem;
	}
	
	.shopcart_nav ul li {
		padding: 0 0 0 0.7rem;
	}
	
	.shopcart_nav ul li>p:first-child {
		font-weight: bold;
	}
	
	.shopcart_nav ul li>p:last-child {
		font-size: 0.3rem;
		margin-top: -0.1rem;
	}
	.cope_li>p{
		font-size: 0.28rem;
	}
	.shopcart_nav ul li p {
		text-align: center;
	}
	
	.shopcart_nav img {
		width: 50%;
		margin-left: 0.35rem;
		margin-top: 0.2rem;
		margin-bottom: 0.06rem;
	}
	
	.shopcart_box {
		display: flex;
		justify-content: space-between;
		background-color: white;
		height: 0.8rem;
		margin-top: 0.12rem;
	}
	
	.user_card_box {
		background: #BBBBBB;
	}
	
	.my_order {
		display: flex;
		justify-content: flex-start;
	}
	
	.my_order a {
		width: 0.1rem;
		height: 0.5rem;
		background: red;
		margin-top: 0.2rem;
	}
	
	.my_order {
		padding: 0 0 0 0.240741rem;
	}
	
	.my_order span {
		line-height: 0.8rem;
		font-size: 0.4rem;
		margin-left: 0.2rem;
		font-weight: bold;
	}
	
	.check_all_order {
		display: flex;
		justify-content: flex-end;
	}
	
	.check_all_order_text {
		font-size: 0.3rem;
		line-height: 0.8rem;
		margin-right: 0.12rem;
		color: #9e9e9e;
	}
	
	.shopcart_img img {
		margin-top: 0.15rem;
		margin-right: 0.24rem;
	}
	
	.hr {
		width: 95%;
		height: 0.05rem;
		background: #f2f2f2;
		margin-left: 0.15rem;
		margin-top: -0.04rem;
	}
	
	#cope_main {
		width: 100%;
		background-color: white;
		height: 1.92rem;
		margin-top: -0.3rem;
	}
	
	.cope_main li {
		width: 20%;
	}
	
	#cope_main {
		display: flex;
		justify-content: space-around;
	}
	
	.cope_li img {
		/*width: 0.66rem;
    	height: 0.66rem;
    	margin-top: 0.4rem;
    	margin-left: 0.1rem;*/
		width: 0.66rem;
		height: 0.66rem;
		margin-top: 0.4rem;
		margin-left: 0.45rem;
	}
	
	.cope_li p {
		text-align: center;
	}
	
	.cope_section_module {
		width: 33%;
		height: 2rem;
		background: white;
		margin-top: 0.18rem;
		white-space: normal;
	}
	
	.cope_section {
		display: flex;
		justify-content: space-between;
	}
	
	.cope_section_module p {
		text-align: center;
		margin-top: -0.2rem;
	}
	
	.cope_section_module img {
		width: 60%;
		transform: translateX(30%);
	}
</style>